<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-20 09:50:53
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-21 20:42:09
 * @FilePath: \shangyitong\src\pages\home\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE//
-->
<template>
	<!-- 引入首页轮播图组件 -->
	<Carsouel></Carsouel>
	<!-- 医院搜索组件 -->
	<Search></Search>
	<!-- 展示医院底部结构 -->
	<el-row :gutter="20">
		<el-col :span="20">
			<!-- 引入医院等级组件 -->
			<Level @getLevel="getLevel"></Level>
			<Region @getRegion="getRegion"></Region>
			<!--展示医院的信息结构 -->
			<div class="hospital" v-if="hasHospital.length > 0">
				<Detail
					v-for="(item, index) in hasHospital"
					class="item"
					:key="index"
					:hospitalInfo="item"
				></Detail>
			</div>
			<el-empty description="暂无医院数据" v-else />
			<el-pagination
				class="pageNav"
				v-model:current-page="pageInfo.pageNo"
				v-model:page-size="pageInfo.limit"
				:page-sizes="[10, 20, 30, 40]"
				:background="true"
				layout=" prev, pager, next,jumper,->,sizes,total"
				:total="pageInfo.total"
				@size-change="handleSizeChange"
				@current-change="getHospital"
			/>
		</el-col>
		<!-- 右侧页面 -->
		<el-col :span="4">
			<!-- 引入右侧组件 -->
			<Tip></Tip>
		</el-col>
	</el-row>
</template>

<script setup lang="ts">
import {} from 'vue'
import Carsouel from './carousel/index.vue'
import Search from './search/index.vue'
//引入首页等级组件
import Level from './level/index.vue'
//引入地区组件
import Region from './region/index.vue'
import Detail from './card/index.vue'
//引入右侧组件
import Tip from './tip/index.vue'
import { reqHospital } from '@/api/home'
import { ref, onMounted } from 'vue'

import type { HosptiaResponse, content } from '@/api/home/type'

//分页器数据
let pageInfo = ref<{
	pageNo: number
	limit: number
	total: number
}>({
	pageNo: 1,
	limit: 10,
	total: 0,
})
//存储医院的数据
let hasHospital = ref<content>([])
//存储医院的等级数据
let hosType = ref<string>('')
//存储医院的地区数据
let districtCode = ref<string>('')
//获取子组件传递过来的Level数据
const getLevel = (level: string) => {
	hosType.value = level
	//再次发请求
	getHospital()
}
//子组件自定义事件获取子组件回传给父组件的地区数据
const getRegion = (region: string) => {
	districtCode.value = region
	//再次发请求
	getHospital()
}

onMounted(() => {
	getHospital()
})
const getHospital = async () => {
	let result: HosptiaResponse = await reqHospital(
		pageInfo.value.pageNo,
		pageInfo.value.limit,
		hosType.value,
		districtCode.value
	)
	if (result.code == 200) {
		//存储已有医院数据
		hasHospital.value = result.data.content
		pageInfo.value.total = result.data.totalElements
	}
}
const handleSizeChange = (value: number) => {
	pageInfo.value.limit = value
	getHospital()
}
</script>

<style lang="scss" scoped>
.hospital {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	.item {
		width: 48%;
		margin-bottom: 5px;
	}
}
.pageNav {
	margin: 10px 0px;
}
</style>
